<script setup lang="ts">
import 'element-plus/theme-chalk/display.css'
import {onMounted, ref } from 'vue'
import Logo from '@/assets/logo.png'
import { useOverViewStore  } from '@/stores'
import MostPlayedAlbums from '@/components/overview/MostPlayedAlbums.vue'
import MostPlayedArtists from '@/components/overview/MostPlayedArtists.vue'
import MostPlayedSongs from "@/components/overview/MostPlayedSongs.vue"
import RecentlyAddedAlbums from "@/components/overview/RecentlyAddedAlbums.vue"
import RecentlyAddedSongs from "@/components/overview/RecentlyAddedSongs.vue"
import RecentlyPlayedSongs from "@/components/overview/RecentlyPlayedSongs.vue"

const overViewStore= useOverViewStore()

onMounted(()=>{
  overViewStore.initOverView()
})

</script>

<template>
  <div>
    <MostPlayedAlbums></MostPlayedAlbums>
    <MostPlayedArtists></MostPlayedArtists>
    <MostPlayedSongs></MostPlayedSongs>
    <RecentlyAddedAlbums></RecentlyAddedAlbums>
    <RecentlyAddedSongs></RecentlyAddedSongs>
    <RecentlyPlayedSongs></RecentlyPlayedSongs>
  </div>

</template>

<style lang="scss" scoped>

</style>